<template>
  <img alt="Vue logo" src="./assets/logo.png">根组件<br>
  <div class="kuang" >
    模板里获取全局状态：<br>
    <template v-for="(item, key, index) in $state" :key="'aa' + index">
      {{key}}:<br>
      <template v-for="(item, key, index) in item" :key="'aa1' + index">
        &nbsp;&nbsp;{{key}}:{{item}}<br>
      </template><br><br>
    </template>
  </div>
  
  <div class="kuang" >
    代码里获取全局状态：<br>
    <template v-for="(item, key, index) in state" :key="'aa' + index">
      {{key}}:<br>
      <template v-for="(item, key, index) in item" :key="'aa1' + index">
        &nbsp;&nbsp;{{key}}:{{item}}<br>
      </template><br><br>
    </template>
  </div>
  <div style="clear:both"></div>
  <input type="button" @click="myClick" value="修改全局状态"/>
  <hr>
  <div class="kuang" >
    <comA />
  </div>
  <div class="kuang" >
    <comA />
  </div>
  <div style="clear:both"></div>
  <div>套娃测试
    <comB/>
  </div>
</template>

<script>
import comA from './views/comA.vue'
import comB from './views/myReactive.vue'
import Vueds from '../packages/vue-data-state'

export default {
  name: 'home',
  components: {
    comA,
    comB
  },
  setup() {
    // 获取全局状态
    const { state } = Vueds.useStore()

    const myClick = () => {
      state.blogState.currentGroupId += 1
      console.log(state)
    }

    return {
      state,
      myClick
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
.kuang {
  float: left;
  margin: 10px;
  padding: 5px;
  border: 1px solid #666;
}
</style>
